// mine/pages/animation/demo9/index.ts
import * as echarts from '../../../../components/ec-canvas/echarts';
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
		show: 0
	},

	show() {
		this.setData({
			show: 1
		})
	},
	hide() {
		this.setData({
			show: 2
		})
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad() {
		this.barComponent = this.selectComponent('#mychart-dom-bar')
		this.initBar()
	},
	initBar() {
		this.barComponent.init((canvas: any, width: any, height: any, dpr: any) => {
			// 图表初始化
			let barChart = echarts.init(canvas, null, {
				width: width,
				height: height,
				devicePixelRatio: dpr
			});
			canvas.setChart(barChart);
			// 配置图表
			barChart.setOption(this.getBarOption())

			return barChart;
		})
	},
	getBarOption() {
		let base = +new Date(1988, 9, 3);
		let oneDay = 24 * 3600 * 1000;
		let data = [[base, Math.random() * 300]];
		for (let i = 1; i < 20000; i++) {
			let now = new Date((base += oneDay));
			data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
		}
		return {
			tooltip: {
				trigger: 'axis',
				position: function (pt) {
					return [pt[0], '10%'];
				}
			},
			title: {
				left: 'center',
				text: 'Large Ara Chart'
			},
			toolbox: {
				feature: {
					dataZoom: {
						yAxisIndex: 'none'
					},
					restore: {},
					saveAsImage: {}
				}
			},
			xAxis: {
				type: 'time',
				boundaryGap: false
			},
			yAxis: {
				type: 'value',
				boundaryGap: [0, '100%']
			},
			dataZoom: [
				{
					type: 'inside',
					start: 0,
					end: 20
				},
				{
					start: 0,
					end: 20
				}
			],
			series: [
				{
					name: 'Fake Data',
					type: 'line',
					smooth: true,
					symbol: 'none',
					areaStyle: {},
					data: data
				}
			]
		}
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady() {

	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {

	},

	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide() {

	},

	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload() {

	},

	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh() {

	},

	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom() {

	},

	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage() {

	}
})